<template>
  <div>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text"
            >工资导入</el-button
          >
          <el-button
            @click="isShow2 = !isShow2"
            style="float: right; padding: 3px 0"
            type="text"
            >{{ isShow2 == true ? "收起" : "展开" }}</el-button
          >
        </div>
        <div>
          <tr>
            <td>项目部门</td>
            <td>
              <el-select v-model="depname" placeholder="请选择">
                <el-option
                  v-for="item in options1"
                  :key="item.dep_name"
                  :label="item.dep_name"
                  :value="item.dep_name"
                >
                </el-option>
              </el-select>
            </td>
            <td>年份</td>
            <td>
              <el-select v-model="year" placeholder="请选择">
                <el-option
                  v-for="item in options2"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </td>
            <td>月份</td>
            <td>
              <el-select v-model="month" placeholder="请选择">
                <el-option
                  v-for="item in options3"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </td>
            <td>
              <el-button type="success" @click="SearchPage">查询</el-button>
            </td>
          </tr>
          <tr>
            <td>选择数据文件</td>
            <td></td>
            <td><el-button type="success">导出</el-button></td>
          </tr>
        </div>
        <div v-show="isShow2 == true">
          <el-button type="primary" @click="OpenAdd" style="float: left"
            >添加</el-button
          >
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="real_name" label="真实姓名">
            </el-table-column>
            <el-table-column prop="issue_year" label="发放年份">
            </el-table-column>
            <el-table-column prop="issue_month" label="发放月份">
            </el-table-column>
            <el-table-column prop="basic_salary" label="基本工资">
            </el-table-column>
            <el-table-column prop="post_salary" label="岗位工资">
            </el-table-column>
            <el-table-column prop="pretest_bonus" label="预发奖金">
            </el-table-column>
            <el-table-column prop="post_allowance" label="岗位津贴">
            </el-table-column>
            <el-table-column prop="traffic_communication" label="交通通讯">
            </el-table-column>
            <el-table-column prop="overtime_allowance" label="加班补助">
            </el-table-column>
            <el-table-column prop="carallowance_poorrepair" label="车补差补">
            </el-table-column>
            <el-table-column prop="absence_deductions" label="缺勤扣款">
            </el-table-column>
            <el-table-column prop="should_pay" label="应发工资">
            </el-table-column>
            <el-table-column
              prop="withholding_of_social_security"
              label="代缴社保"
            >
            </el-table-column>
            <el-table-column prop="real_withhold_taxes" label="实扣税金">
            </el-table-column>
            <el-table-column prop="real_wages" label="实发工资">
            </el-table-column>
            <el-table-column prop="center_salary" label="中心工资">
            </el-table-column>
            <el-table-column prop="this_salary" label="本所工资">
            </el-table-column>
            <el-table-column prop="company_cost" label="公司成本">
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>

    <div v-show="isShowEdit == true">
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text"
            >添加</el-button
          >
          <el-button
            @click="isShow3 = !isShow3"
            style="float: right; padding: 3px 0"
            type="text"
            >{{ isShow3 == true ? "收起" : "展开" }}</el-button
          >
        </div>
        <el-col :push="8">
          <div v-show="isShow3 == true">
            <el-form
              style="float: left"
              ref="form"
              :model="form"
              label-width="80px"
            >
              <el-form-item label="真实姓名">
                <el-input v-model="form.real_name"></el-input>
              </el-form-item>
              <el-form-item label="发放年份">
                <el-select v-model="form.issue_year" placeholder="请选择">
                <el-option
                  v-for="item in options2"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              </el-form-item>
              <el-form-item label="发放月份">
                    <el-select v-model="form.issue_month" placeholder="请选择">
                <el-option
                  v-for="item in options3"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              </el-form-item>
              <el-form-item label="基本工资">
                <el-input v-model="form.basic_salary"></el-input>
              </el-form-item>
              <el-form-item label="岗位工资">
                <el-input v-model="form.post_salary"></el-input>
              </el-form-item>
              <el-form-item label="预发奖金">
                <el-input v-model="form.pretest_bonus"></el-input>
              </el-form-item>
              <el-form-item label="岗位津贴">
                <el-input v-model="form.post_allowance"></el-input>
              </el-form-item>
              <el-form-item label="交通通讯">
                <el-input v-model="form.traffic_communication"></el-input>
              </el-form-item>
              <el-form-item label="加班补助">
                <el-input v-model="form.overtime_allowance"></el-input>
              </el-form-item>
              <el-form-item label="车补差补">
                <el-input v-model="form.carallowance_poorrepair"></el-input>
              </el-form-item>
              <el-form-item label="缺勤扣款">
                <el-input v-model="form.absence_deductions"></el-input>
              </el-form-item>
              <el-form-item label="应发工资">
                <el-input v-model="form.should_pay"></el-input>
              </el-form-item>
              <el-form-item label="代缴社保">
                <el-input v-model="form.withholding_of_social_security"></el-input>
              </el-form-item>
              <el-form-item label="实扣税金">
                <el-input v-model="form.real_withhold_taxes"></el-input>
              </el-form-item>
              <el-form-item label="实发工资">
                <el-input v-model="form.real_wages"></el-input>
              </el-form-item>
              <el-form-item label="中心工资">
                <el-input v-model="form.center_salary"></el-input>
              </el-form-item>
              <el-form-item label="本所工资">
                <el-input v-model="form.this_salary"></el-input>
              </el-form-item>
              <el-form-item label="公司成本">
                <el-input v-model="form.company_cost"></el-input>
              </el-form-item>
              <el-form-item label="项目部门">
                <el-select v-model="form.dep_name" placeholder="请选择">
                <el-option
                  v-for="item in options1"
                  :key="item.dep_name"
                  :label="item.dep_name"
                  :value="item.dep_name"
                >
                </el-option>
              </el-select>
              </el-form-item>
              <el-button type="success" @click="IntroductionPersonnelSalaryAdd"
                >保存</el-button
              >
              <el-button @click="isShowEdit = false">取消</el-button>
            </el-form>
          </div>
        </el-col>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  SearchPage,
  GetDropDown,
  IntroductionPersonnelSalaryAdd,
} from "./introduction_personnel_salaryApi";
export default {
  data() {
    return {
      options1: [],
      options2: [],
      options3: [],
      tableData: [],
      isShow2: true,
      isShow3: true,
      isShowEdit: false,
      form: {
        real_name: null,
        issue_year: null,
        issue_month: null,
        basic_salary: null,
        post_salary: null,
        pretest_bonus: null,
        post_allowance: null,
        traffic_communication: null,
        overtime_allowance: null,
        carallowance_poorrepair: null,
        absence_deductions: null,
        should_pay: null,
        withholding_of_social_security: null,
        real_withhold_taxes: null,
        real_wages: null,
        center_salary: null,
        this_salary: null,
        company_cost: null,
        dep_name: null,
      },
      depname: "",
      year: 2015,
      month: 1,
    };
  },
  created() {
    this.SearchPage();
    this.GetDropDown();
  },
  methods: {
    SearchPage() {
      SearchPage(this.depname, this.year, this.month).then((res) => {
        this.tableData = res.data;
        console.log(res)
      });
    },
    OpenAdd() {
       this.isShowEdit = true;
       this.form.real_name=null,
       this.form.issue_year=null,
       this.form.issue_month=null,
       this.form.basic_salary=null,
       this.form.post_salary=null,
       this.form.pretest_bonus=null,
       this.form.post_allowance= null,
       this.form.traffic_communication=null,
       this.form.overtime_allowance=null,
       this.form.carallowance_poorrepair=null,
       this.form.absence_deductions= null,
       this.form.should_pay=null,
       this.form.withholding_of_social_security=null,
       this.form.real_withhold_taxes=null,
       this.form.real_wages=null,
       this.form.center_salary=null,
       this.form.this_salary= null,
       this.form.company_cost= null,
       this.form.dep_name=null;
     
    },
    IntroductionPersonnelSalaryAdd() {
      IntroductionPersonnelSalaryAdd(this.form).then((res) => {
        if (res.data > 0) {
          alert("添加成功");
          this.isShowEdit = false;
          this.SearchPage();
        } else {
          alert("数据不能为空");
        }
      });
    },
    GetDropDown() {
      GetDropDown().then((res) => {
        this.options1 = res.data.list;
        this.options2 = res.data.yearlist;
        this.options3 = res.data.monthlist;
      });
    },
  },
};
</script>